<template>
  <div class="components-preview-pdf-page">
    <div v-if="pdfUrl" class="pdf_list" ref="pdfBox" >
    </div>
    <div v-else>
      <div>暂无数据</div>
    </div>
  </div>
</template>

<script>
import {mapActions, mapMutations} from "vuex";
import * as pdfjsLib from 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.1.392/pdf.mjs'
export default {

  data() {
    return {
    }
  },
  watch: {},
  props: {
    pdfUrl: String,//在线pdf路径，或者如果跟后端确认必须走接口获取文件流格式预览的话，type是stream，这个pdfUrl就是接口名字
    type: {
      type: String,
      default: 'online' //online是线上的，stream是文件流
    }
  },
  computed: {},
  mounted() {
    setTimeout(() => {
      pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.1.392/pdf.worker.mjs'
      if (this.pdfUrl) {
        this.loadPdf(this.pdfUrl)
      }
    }, 2000)


  },
  methods: {
    ...mapMutations(['setLoading']),
    ...mapActions([
    ]),
    // 获取文件流 arraybuffer格式的
    getFileStream(url) {
      return new Promise((resolve, reject) => {
        this.$http.get(url, {
          responseType: 'arraybuffer',
        }).then(res => {
          resolve(res.request.response)
        }).catch(error => {
          resolve(error)
        }).finally( msg => {
          resolve(msg)
        })
      })
    },
    //加载pdf
    async loadPdf(url) {
      this.setLoading(true)
      try {
        let loadingTask = ''
        if (this.type === 'online') loadingTask = pdfjsLib.getDocument(url);
        else {
          // 如果是文件流格式的话需要获取一下arraybuffer
          let data = await this.getFileStream(url)
          loadingTask = pdfjsLib.getDocument({ data });
        }
        const pdfDocument = await loadingTask.promise;

        for (let pageNumber = 1; pageNumber <= pdfDocument.numPages; pageNumber++) {
          const page = await pdfDocument.getPage(pageNumber);
          var scale = 1.5
          var viewport = page.getViewport({ scale: scale });
          const canvas = document.createElement('canvas');
          const context = canvas.getContext('2d');
          canvas.width = viewport.width;
          canvas.height = viewport.height;
          canvas.style = 'width: 100%'
          this.$refs.pdfBox.appendChild(canvas);
          const renderTask = page.render({
            canvasContext: context,
            viewport: viewport
          });
          await renderTask.promise;
          this.setLoading(false)
        }
      } catch (error) {
        console.error('Error loading PDF:', error);
      }


    },
  }

}
</script>
<style lang="scss" scoped>
.components-preview-pdf-page {
  height: 100vh;
  overflow-y: auto;
  .pdf_list {
    font-size: 0.28rem;

    >.sdd{
      width: 100%!important;
      height: auto;
    }

    .show-pdf-info{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0.1rem 0.32rem;

      .van-button{
        margin-left: 0.12rem;
        height: 0.56rem;
        padding: 0.08rem 0.12rem;
        font-size: 0.28rem;
      }
    }

    #the-canvas{
      width: 100%;
      //height: 100%;
      overflow-y: scroll;
    }
  }
}
</style>
